<template>
	<!-- 组件结构 -->
	<div class="stu">
		<h3>{{msg}}</h3>
		<h2>学生名称:{{studentName}}</h2>
		<h2>学生性别:{{sex}}</h2>
		<h2>学生年龄:{{myAge+1}}</h2>
		<button type="button" @click="updataAge">尝试修改收到的年龄</button>
	</div>
</template>

<script>
	// 组件交互相关的代码(数据、方法等)
	// 创建school组件
	export default {
		name:'Student',
		// data 要写成函数式
		data(){
			// console.log(this);
			return{
				msg:'我是一名学生',
				myAge:this.age,
				// studentName:'老王',
				// age:22,
				// sex:'男',
			};
		},
		methods:{
			updataAge(){
				this.myAge++;
			}
		},
		// 简单声明接收
		// props:['studentName','age','sex']
		
		// 接收的同时对数据进行类型的限制
		/*props:{
			studentName:String,
			age:Number,
			sex:String,
		}*/
		
		// 接收的同时对数据进行类型的限制 + 默认值的指定 + 必要性的限制
		props:{
			studentName:{
				type:String,
				required:true,
			},
			age:{
				type:Number,
				// 默认值
				// default:5
			},
			sex:{
				type:String,
				required:true,
			}
		}
	};
	// export default school
</script>

<style>
	/* 组件的样式 */
	.stu{
		background-color: #55aa7f;
		color: #FF5500;
	}
</style>
